<template>
    <div class="home-container">
      <!-- 左侧边栏 -->
      <el-aside class="sidebar">
        <div class="sidebar-header">
          <el-button type="primary" class="new-chat-btn" @click="startNewChat">
            <el-icon><Plus /></el-icon>
            新聊天
          </el-button>
        </div>
        <el-scrollbar class="history-list">
          <div
            v-for="(chat, index) in chatHistory"
            :key="index"
            class="history-item"
            :class="{ active: activeChatIndex === index }"
            @click="switchChat(index)"
          >
            <el-icon><ChatLineRound /></el-icon>
            <span>{{ chat.title }}</span>
          </div>
        </el-scrollbar>
      </el-aside>
  
      <!-- 主内容区 -->
      <el-main class="main-content">
        <!-- AI 对话框 -->
        <div class="chat-container">
          <div v-for="(message, index) in currentChat.messages" :key="index" class="message-item">
            <div
              :class="[
                'message-bubble',
                message.role === 'user' ? 'user-message' : 'ai-message'
              ]"
            >
              <div class="message-content">
                {{ message.content }}
              </div>
            </div>
          </div>
        </div>
  
        <!-- 输入框 -->
        <div class="input-container">
          <el-input
            v-model="userInput"
            placeholder="输入你的问题..."
            @keyup.enter="sendMessage"
          >
            <template #append>
              <el-button type="primary" @click="sendMessage">
                <el-icon><Promotion /></el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
      </el-main>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { Plus, ChatLineRound, Promotion } from '@element-plus/icons-vue'
  
  // 聊天历史数据
  const chatHistory = ref([
    {
      title: '对话 1',
      messages: [
        { role: 'user', content: '你好！' },
        { role: 'ai', content: '你好！有什么可以帮你的吗？' }
      ]
    },
    {
      title: '对话 2',
      messages: [
        { role: 'user', content: 'Vue3 怎么使用？' },
        { role: 'ai', content: 'Vue3 提供了 Composition API，你可以使用 setup 函数来组织代码。' }
      ]
    }
  ])
  
  // 当前选中的聊天索引
  const activeChatIndex = ref(0)
  
  // 当前聊天内容
  const currentChat = reactive({
    messages: []
  })
  
  // 用户输入
  const userInput = ref('')
  
  // 初始化当前聊天
  currentChat.messages = chatHistory.value[activeChatIndex.value].messages
  
  // 切换聊天
  const switchChat = (index) => {
    activeChatIndex.value = index
    currentChat.messages = chatHistory.value[index].messages
  }
  
  // 开始新聊天
  const startNewChat = () => {
    const newChat = {
      title: `对话 ${chatHistory.value.length + 1}`,
      messages: []
    }
    chatHistory.value.push(newChat)
    activeChatIndex.value = chatHistory.value.length - 1
    currentChat.messages = newChat.messages
  }
  
  // 发送消息
  const sendMessage = () => {
    if (!userInput.value.trim()) return
  
    // 添加用户消息
    currentChat.messages.push({ role: 'user', content: userInput.value })
  
    // 模拟 AI 回复
    setTimeout(() => {
      currentChat.messages.push({ role: 'ai', content: '这是 AI 的回复。' })
    }, 500)
  
    // 清空输入框
    userInput.value = ''
  }
  </script>
  
  <style scoped>
  .home-container {
    display: flex;
    height: 100vh;
    background-color: #f5f7fa;
  }
  
  .sidebar {
    width: 260px;
    background-color: #ffffff;
    border-right: 1px solid #e4e7ed;
    padding: 16px;
  }
  
  .sidebar-header {
    margin-bottom: 16px;
  }
  
  .new-chat-btn {
    width: 100%;
  }
  
  .history-list {
    height: calc(100vh - 80px);
  }
  
  .history-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin: 4px 0;
    border-radius: 6px;
    cursor: pointer;
    color: #606266;
  }
  
  .history-item:hover {
    background-color: #f5f7fa;
  }
  
  .history-item.active {
    background-color: #ecf5ff;
    color: #409eff;
  }
  
  .history-item .el-icon {
    margin-right: 8px;
  }
  
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background-color: #ffffff;
  }
  
  .chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .message-item {
    margin-bottom: 16px;
  }
  
  .message-bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  .user-message {
    background-color: #409eff;
    color: #ffffff;
    margin-left: auto;
  }
  
  .ai-message {
    background-color: #f5f7fa;
    color: #303133;
    margin-right: auto;
  }
  
  .input-container {
    padding: 16px;
    background-color: #ffffff;
  }
  </style>